<template>
  <div class="debug-container">
    <h1>登录状态调试页面</h1>
    <div class="status-section">
      <h2>localStorage 登录相关信息</h2>
      <div v-if="loginInfo.token" class="success-message">
        ✅ 已登录！Token 存在
      </div>
      <div v-else class="error-message">
        ❌ 未登录：Token 不存在
      </div>
      
      <div class="info-item">
        <strong>Token:</strong> {{ loginInfo.token ? '存在' : '不存在' }}
      </div>
      <div class="info-item">
        <strong>用户信息:</strong> {{ loginInfo.user ? '存在' : '不存在' }}
      </div>
      <div class="info-item">
        <strong>登录测试标记:</strong> {{ loginInfo.loginSuccessTest }}
      </div>
      <div class="info-item">
        <strong>登录时间:</strong> {{ loginInfo.loginSuccessTime }}
      </div>
      <div class="info-item">
        <strong>模拟数据设置:</strong> {{ loginInfo.useMockData }}
      </div>
    </div>
    
    <div class="actions-section">
      <el-button @click="clearLoginInfo">清除登录信息</el-button>
      <el-button type="primary" @click="navigateToLogin">返回登录页</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const loginInfo = ref({
  token: null,
  user: null,
  loginSuccessTest: null,
  loginSuccessTime: null,
  useMockData: null
})

const loadLoginInfo = () => {
  console.log('加载localStorage登录信息...')
  loginInfo.value = {
    token: localStorage.getItem('token'),
    user: localStorage.getItem('user'),
    loginSuccessTest: localStorage.getItem('loginSuccessTest'),
    loginSuccessTime: localStorage.getItem('loginSuccessTime'),
    useMockData: localStorage.getItem('useMockData')
  }
  console.log('localStorage登录信息:', loginInfo.value)
}

const clearLoginInfo = () => {
  console.log('清除localStorage登录信息...')
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  localStorage.removeItem('loginSuccessTest')
  localStorage.removeItem('loginSuccessTime')
  localStorage.removeItem('loggedInUser')
  localStorage.removeItem('lastLogin')
  localStorage.removeItem('useMockData')
  loadLoginInfo()
  ElMessage.success('登录信息已清除')
}

const navigateToLogin = () => {
  router.push('/login')
}

onMounted(() => {
  console.log('DebugLoginStatus组件挂载')
  loadLoginInfo()
  
  // 每秒刷新一次状态
  setInterval(() => {
    loadLoginInfo()
  }, 1000)
})
</script>

<style scoped>
.debug-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  color: #606266;
  margin-bottom: 20px;
  font-size: 18px;
}

.status-section {
  background: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.actions-section {
  text-align: center;
}

.info-item {
  margin: 10px 0;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}

.success-message {
  color: #67c23a;
  font-weight: bold;
  padding: 10px;
  background: #f0f9eb;
  border-radius: 4px;
  margin-bottom: 15px;
}

.error-message {
  color: #f56c6c;
  font-weight: bold;
  padding: 10px;
  background: #fef0f0;
  border-radius: 4px;
  margin-bottom: 15px;
}
</style>